<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17.controller_component</title>
</head>
<body>
<div id="app"></div>

<script src="lib/react.development.js"></script>
<script src="lib/react-dom.development.js"></script>
<script src="lib/babel.min.js"></script>
<script type="text/babel">
  class FormHandler extends React.Component{
      handle = (event)=>{
          event.preventDefault();
          /*非受控组件
          * 通过点击按钮的方式将文本框内的值拿过来 文本框上没有定义函数
          * 所以需要借由refs将文本框映射为一个变量
          * */
          console.log(this.username.value,this.password.value);
      }

      render() {
          return (
              <div>
                  <form onSubmit={this.handle}>
                      用户名 <input type="text" ref={c=>this.username=c}/><br/>
                      密码 <input type="password" ref={c=>this.password=c}/>
                      <button>登录</button>
                  </form>
              </div>
          );
      }
  }

   ReactDOM.render(<FormHandler/>,document.getElementById("app"))
</script>
</body>
</html>